<template>
	<view class="address-page">		
			<!-- <free-nav-bar textContent="地址管理" isBackShow></free-nav-bar> -->
			<view class="address-list" id="head" :style="{height: scrollerHeight + 'px'}">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll" :style="{height: scrollerHeight + 'px'}">
					<uni-list class="address_list" >
						<template v-if="myAddrList && myAddrList.length > 0">
							<uni-list-item v-for="item in myAddrList" title="" :key="item.id" class="address-item" direction="column" clickable>
								<template v-slot:header>
									<view class="slot-box">
										<text>{{item.name}}</text>
										<text style="margin-left: 20rpx;">{{item.mobile}}</text>	
										<uni-tag v-if="item.defaultStatus" :mark="true" style="margin-left: 20rpx;" text="默认" type="primary" size="mini" />
									</view>											
								</template>
								<!-- 自定义 body -->
								<template v-slot:body>	
									<view class="address-detail">
										<text class="main-text-color font28">{{item.detailAddress}}</text>
										<view class="address-edit" @click="editHandle(item)"> <span class="sprite sprite-edit"></span> </view>
									</view>									
								</template>							
							</uni-list-item>
						</template>
						
						<uni-list-item title="" class="address-item" clickable>
							<template v-slot:body>
								<view class="add">
									<button class="add-address" type="warn" @click="goAddAddress">添加地址</button>
								</view>
							</template>	
						</uni-list-item>
					</uni-list>
				</scroll-view>
			</view>
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import $U from '@/common/free-lib/util.js';
	import $H from '@/common/free-lib/request.js';
	export default {
		components: {
			freeNavBar
		},
		data() {
			return {
				phoneHeight: 0, //屏幕可用高度
				topHeight: 0, //滑块上方高度
				bottomHeight: 0, //底部高度
				scrollerHeight:0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				myAddrList:[]
			}
		},
		onShow() {
			this.getMyAddressList();
		},
		onReady() {
			var height;
			var _this = this;
			uni.getSystemInfo({
				success: function(res) {
					_this.phoneHeight = res.windowHeight;
					_this.$nextTick(() => {
						let view = uni.createSelectorQuery().select("#head"); //局部滑块
						view.boundingClientRect(data => {
							_this.topHeight = data.height;
							height = _this.phoneHeight - _this.topHeight - 44;	
							_this.scrollerHeight = height;
						}).exec();
					})
				},
			}); 
			this.scrollerHeight = height;
		},
		methods: {
			getMyAddressList() {
				  let _this = this;
				  $H.get('/member/address/list').then(res => {
					 if(res) {
						_this.myAddrList = res;						
					 }
				  })
			},
			editHandle(item) {
				uni.navigateTo({url: '/pages/my/add-address?address=' + JSON.stringify(item)});
			},
			goAddAddress() {
				uni.navigateTo({url: '/pages/my/add-address'});
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			}
		}
	}
</script>

<style lang="scss" scoped>
.slot-box /deep/ .uni-tag--primary {
	background-color: #FD5052 ;
	border-color:#FD5052 ;
}
.address-page {
	position: relative;
	padding-bottom: 90rpx;
	background: #F4F4F4;
	/deep/ .uni-list {
		background: #F4F4F4;
	}
	.address-list {
		position: relative;
		width: 100%;
		min-height: 260rpx;
		background: #F4F4F4;
		.add {
			padding: 8rpx 30rpx;
			width: 100%;
			.add-address {
				line-height: 45px;
				border-radius: 200px;
				font-size: 28rpx;
				height: 90rpx;
				align-items: center;
				justify-content: center;
				color: #fff;
				cursor: pointer;
			}
		}
		.address-item {
			position: relative;
			width: 100%;
			height: 160rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
			text-align: left;
			font-style: normal;
			text-transform: none;
			background-color: #fff;
			margin-top: 16rpx;
			.address-detail {
				position: relative;
				width: 100%;
				height: 80rpx;
				padding-top: 20rpx;
				.address-edit {
					position: relative;
					float: right;
					span {
						display: block;
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}
		
		
	}
}
</style>
